import { Button, Form, Input } from 'antd'
import { useState } from 'react'
import { idcardApi } from './idcardApi'

export default function IdCard() {
  const [html, setHtml] = useState<any>()
  return (
    <div id=''>
      <Form
        onFinish={(values) => {
          idcardApi(`q=${values.sfz}`).then((res) => {
            // console.log(res)
            res && setHtml(res)
          })
        }}
      >
        <Form.Item
          key={'sfz'}
          name={'sfz'}
          rules={[
            {
              required: true,
              message: '请输入正确的身份证',
            },
            {
              required: false,
              pattern: new RegExp(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, 'g'),
              message: '请输入正确的身份证',
            },
          ]}
        >
          <Input placeholder={'请输入身份证号'} />
        </Form.Item>
        <Form.Item>
          <Button type={'primary'} htmlType={'submit'}>
            查询
          </Button>
        </Form.Item>
      </Form>
      <div dangerouslySetInnerHTML={{ __html: html }}></div>
    </div>
  )
}
